import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, InputNumber,Option, Modal, Row, Select,label, AutoComplete} from 'antd';
import CurrencySelect from '../../common/CurrencySelect';
import Constants from '../../../utils/Constants';
const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");


const addFee = Form.create()(class AddFee extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            id: false,
            disabled: false,
            newAdd:false,
            edit:false,
            dataSource: {}

        }
    }
    tempId = 1;

    handleOpen = (dataSource,newAdd,edit) => {
        this.setState({ open: true, dataSource,newAdd,edit });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }


    handleSelect = (value)=>{
        this.props.form.setFieldsValue({ rate: value === "CNY" ? "1": undefined })
    }

    handleSave = (  ) => {
        let newAdd = this.state.newAdd;
        this.props.form.validateFields({ force: true }, (errors, values) => {
                if (errors) return;
                values.id = newAdd ? Constants.TEMP_ID_PRE + this.tempId++: (this.state.dataSource.id ? this.state.dataSource.id :Constants.TEMP_ID_PRE + this.tempId++);
                values.feeItemName = values.feeItemId.title ? values.feeItemId.title : values.feeItemId.label;
                values.feeItemId = values.feeItemId.key ? values.feeItemId.key :values.feeItemId.value;
            if (this.props.handleAddOrUpdateFee) this.props.handleAddOrUpdateFee(values);
            this.handleCancel();
        })
    }

    render() {
        let newAdd = this.state.newAdd;
        let newFeeItemName= this.state.edit ? this.state.dataSource.feeItemName :{} ;
        let newFeeItemId = this.state.edit ? this.state.dataSource.feeItemId :{} ;
        let dataSource = this.props.chargeTemplate.dataSource ? this.props.chargeTemplate.dataSource : {};
        let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
        let feeItemList = this.props.feeItem.feeItemList ? this.props.feeItem.feeItemList : [];
        let quotePrice = (this.props.form.getFieldValue("fee") * this.props.form.getFieldValue("count")) ? (this.props.form.getFieldValue("fee") * this.props.form.getFieldValue("count") ): null;
        let quotePriceCny =  (this.props.form.getFieldValue("rate")*this.props.form.getFieldValue("fee") * this.props.form.getFieldValue("count")) ? (this.props.form.getFieldValue("rate")*this.props.form.getFieldValue("fee") * this.props.form.getFieldValue("count")) : null;


        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];
        return (
            <Modal maskClosable={false} visible={this.state.open} width={850} title={"费用新增"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用项目" hasFeedback>
                                {getFieldDecorator('feeItemId', {
                                    rules: [{
                                        required: true, message: '请选择费用项目'
                                    }],
                                    initialValue:this.state.edit ? {value:newFeeItemId, label:newFeeItemName } : (newAdd ?(R.isNil(dataSource.feeItemId) || R.isEmpty(dataSource.feeItemId)) ? undefined : dataSource.feeItemId + "" : (this.state.dataSource.feeItemId ? this.state.dataSource.feeItemId : (R.isNil(dataSource.feeItemId) || R.isEmpty(dataSource.feeItemId)) ? undefined : dataSource.feeItemId + "")

                                   )

                                })(
                                  <Select   labelInValue  style={{ width: '100%' }} disabled={this.state.disabled} showSearch placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                        {
                                            !R.isNil(feeItemList) ? feeItemList.map(item => {

                                                return (
                                                    <Select.Option value={item.id + ""} key={item.id + ""} title={item.name + "[" + item.code + "]"} >{item.name + "[" + item.code + "]"}</Select.Option>);

                                            }) : ''
                                        }
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="币种" hasFeedback>
                                {getFieldDecorator('currency', {
                                    rules: [{
                                        required: true, message: '请选择币种',
                                    }],
                                    initialValue: newAdd ? dataSource.currency : (this.state.dataSource.currency ?  this.state.dataSource.currency : dataSource.currency)
                                })(
                                    <Select   disabled={this.state.disabled} onChange={this.handleSelect.bind(this)}>
                                        <Select.Option value="CNY">人民币[CNY]</Select.Option>
                                        <Select.Option value="USD">美元[USD]</Select.Option>
                                        <Select.Option value="HKD">港币[HKD]</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="单价" hasFeedback>
                                {getFieldDecorator('fee', {
                                    rules: [{
                                        required: true, message: '请输入单价',
                                    }],
                                    initialValue: newAdd ? dataSource.fee : (this.state.dataSource.fee ? this.state.dataSource.fee : dataSource.fee)
                                })(

                                    <Input disabled={this.state.disabled} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="数量" hasFeedback>
                                {getFieldDecorator('count', {
                                    rules: [{
                                        required: true, message: '请输入数量',
                                    }],
                                    initialValue: newAdd ? dataSource.count : (this.state.dataSource.count ?  this.state.dataSource.count :dataSource.count)
                                })(
                                    <Input disabled={this.state.disabled} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="合计" hasFeedback>
                                {getFieldDecorator('quotePrice', {
                                    initialValue: newAdd ? Math.round(quotePrice * 100) / 100 : (this.state.dataSource.quotePrice ? this.state.dataSource.quotePrice : Math.round(quotePrice * 100) / 100)
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="汇率" hasFeedback>
                                {getFieldDecorator('rate', {
                                    rules: [{
                                        required: true, message: '请输入汇率',
                                    }],
                                    initialValue: newAdd ? dataSource.rate : (this.state.dataSource.rate ? this.state.dataSource.rate : dataSource.rate)
                                })(
                                    <Input disabled={this.props.form.getFieldValue("currency") === "CNY" ? true : this.state.disabledd} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="人民币合计" hasFeedback>
                                {getFieldDecorator('quotePriceCny', {

                                    initialValue: newAdd ?  Math.round(quotePriceCny * 100) / 100 : (this.state.dataSource.quotePriceCny ? this.state.dataSource.quotePriceCny : Math.round(quotePriceCny * 100) / 100)
                                })(
                                    <Input disabled={true} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="结算单位" hasFeedback>
                                {getFieldDecorator('settlementUnit', {
                                    rules: [{
                                        required: true, message: '请输入结算单位',
                                    }],
                                    initialValue: newAdd ? dataSource.settlementUnit : (this.state.dataSource.settlementUnit ? this.state.dataSource.settlementUnit : dataSource.settlementUnit)

                                })(
                                    <Input disabled={this.state.disabled} maxLength="200" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form >
            </Modal >
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.chargeTemplate, chargeTemplate: state.chargeTemplate, supplier: state.supplier,feeItem: state.feeItem,localFeeDetail: state.localFeeDetail,orderCharge: state.orderCharge,
    };
}

export default connect(mapStateToProps)(addFee);